<script>
import {mapGetters, mapState} from "vuex";

export default {
  name: "Address",
  data() {
    return {}
  },
  computed: {
    ...mapState("userStore", ["address"]),
    ...mapGetters("userStore", ["fullAddress"])
  },
  methods: {
    /* 点击添加收货地址的回调函数 */
    chooseAddress() {
      uni.chooseAddress({
        success: (result) => {
          this.$store.commit("userStore/updateAddress", result)
        },
        fail: () => {
          uni.showToast({title: "选择收货地址失败", icon: "error", duration: 2000})
        }
      })
    }
  },
}
</script>

<template>
  <view>
    <view class="button-box" v-if="!address.userName">
      <button type="primary" size="mini" class="button" @click="chooseAddress">请选择收货地址+</button>
    </view>

    <view class="address-box" v-else @click="chooseAddress">
      <view class="top">
        <text>收货人: {{ address.userName }}</text>
        <text>电话: {{ address.telNumber }}
          <uni-icons type="arrowright" :size="16"></uni-icons>
        </text>
      </view>
      <view class="bottom">收货地址: {{ fullAddress }}</view>
    </view>
    <image src="@/static/images/line.png"></image>
  </view>
</template>

<style scoped lang="scss">
view {
  .button-box {
    width: 100%;
    height: 180rpx;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .address-box {
    height: 180rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 0 10rpx;

    .top {
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      color: #4f4f4f;
    }

    .bottom {
      font-size: 28rpx;
      color: #4f4f4f;
      white-space: nowrap;
    }
  }

  image {
    width: 100%;
    height: 10rpx;
  }
}
</style>
